<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>ColorBox</title>
	<link media="screen" rel="stylesheet" href="readme.css">
</head>
<body>

<div class="body">
<article>

<h1>ColorBox</h1>

<p class="description">A lightweight customizable lightbox plugin for jQuery 1.3+</p>

<a href="http://github.com/jackmoore/colorbox/tree/master" id="fork">Fork me on GitHub</a>

<h2>View Demos</h2>

<p>
	<a href="http://jacklmoore.com/colorbox/example1/" class="demo">1</a>
	<a href="http://jacklmoore.com/colorbox/example2/" class="demo">2</a>
	<a href="http://jacklmoore.com/colorbox/example3/" class="demo">3</a>
	<a href="http://jacklmoore.com/colorbox/example4/" class="demo">4</a>
	<a href="http://jacklmoore.com/colorbox/example5/" class="demo">5</a>
</p>

<h2>Download</h2>

<p>Current version: <a href="http://jacklmoore.com/colorbox/colorbox.zip">1.3.19</a> ( Released under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a> | <a href="http://github.com/jackmoore/colorbox/tree/master">Github</a> | <a href="http://jacklmoore.com/colorbox/readme.md">Changelog</a> )
	<br>Tested in: Firefox, Safari, Chrome, Internet Explorer 6, 7, 8, 9, Opera 11.</p>

<?php
/**
* 
* ColorBox
* 
* Ссылки:
* 1. http://jacklmoore.com/colorbox/
* 2. http://github.com/jackmoore/colorbox/tree/master
* 3. http://jacklmoore.com/colorbox/faq/
* 4. http://jacklmoore.com/notes/colorbox-for-beginners/
*
* Лицензия:
* 1. MIT License (http://www.opensource.org/licenses/mit-license.php)
* 
*/
?>

<h2>Features</h2>
<ul>
	<li>Supports photos, grouping, slideshow, ajax, inline, and iframed content.</li>
	<li>Lightweight: 10KB of JavaScript (less than 5KBs gzipped).</li>
	<li>Appearance is controlled through CSS so it can be restyled.</li>
	<li>Can be extended with callbacks &amp; event-hooks without altering the source files.</li>
	<li>Completely unobtrusive, options are set in the JS and require no changes to existing HTML.</li>
	<li>Preloads upcoming images in a photo group.</li>
	<!-- <li>Used on tens of thousands of sites, including <a href='http://jacklmoore.imgur.com/ohoopee'>imgur</a>.</li> -->
	<li>Well vetted (ColorBox is one of the <a href="http://blog.builtwith.com/2011/10/31/jquery-version-and-usage-report/" title="see bottom pie-graph">top 10 jQuery plugins</a>, currently used on tens of thousands of websites).</li>
</ul>

<h2>Instructions &amp; Help</h2>

<p>The <a href="http://jacklmoore.com/colorbox/faq/">FAQ</a> has instructions on asking for help, solutions to common problems, and how-to examples.</p>

<p>First-time jQuery users can check out the <a href="http://jacklmoore.com/notes/colorbox-for-beginners/">ColorBox Beginner's Guide</a>.
	<br>Intermediate users can probably glean everything needed by view-source'ing the demo pages.</p>


<h2>Usage</h2>

<p>ColorBox accepts settings from an object of key/value pairs, and can be assigned to any HTML element.</p>

<div class="code" style="background:#F3FBFF; padding:6px 10px; overflow:auto; display:block; border-left:4px solid #deecf3; font-size:13px;"><pre class="javascript"><span style="color: #090; font-style: italic">// Format:</span>
$<span style="color: #6c6">(</span>selector<span style="color: #6c6">)</span>.<span style="color: #060">colorbox</span><span style="color: #6c6">(</span><span style="color: #6c6">{</span>key:value, key:value, key:value<span style="color: #6c6">}</span><span style="color: #6c6">)</span>;</pre>
</div>
<div class="code" style="background:#F3FBFF; padding:6px 10px; overflow:auto; display:block; border-left:4px solid #deecf3; font-size:13px;"><pre class="javascript"><span style="color: #090; font-style: italic">// Examples:</span>
<span style="color: #090; font-style: italic">// Image links displayed as a group</span>
$<span style="color: #6c6">(</span><span style="color: #36c">'a.gallery'</span><span style="color: #6c6">)</span>.<span style="color: #060">colorbox</span><span style="color: #6c6">(</span><span style="color: #6c6">{</span>rel:<span style="color: #36c">'gal'</span><span style="color: #6c6">}</span><span style="color: #6c6">)</span>;
&nbsp;
<span style="color: #090; font-style: italic">// Ajax</span>
$<span style="color: #6c6">(</span><span style="color: #36c">'a#login'</span><span style="color: #6c6">)</span>.<span style="color: #060">colorbox</span><span style="color: #6c6">(</span><span style="color: #6c6">)</span>;
&nbsp;
<span style="color: #090; font-style: italic">// Called directly, without assignment to an element:</span>
$.<span style="color: #060">colorbox</span><span style="color: #6c6">(</span><span style="color: #6c6">{</span>href:<span style="color: #36c">"thankyou.html"</span><span style="color: #6c6">}</span><span style="color: #6c6">)</span>;
&nbsp;
<span style="color: #090; font-style: italic">// Called directly with HTML</span>
$.<span style="color: #060">colorbox</span><span style="color: #6c6">(</span><span style="color: #6c6">{</span>html:<span style="color: #36c">"&lt;h1&gt;Welcome&lt;/h1&gt;"</span><span style="color: #6c6">}</span><span style="color: #6c6">)</span>;
&nbsp;
<span style="color: #090; font-style: italic">// ColorBox can accept a function in place of a static value:</span>
$<span style="color: #6c6">(</span><span style="color: #36c">"a.gallery"</span><span style="color: #6c6">)</span>.<span style="color: #060">colorbox</span><span style="color: #6c6">(</span><span style="color: #6c6">{</span>rel: <span style="color: #36c">'gal'</span>, title: <span style="color: #036; font-weight: bold">function</span><span style="color: #6c6">(</span><span
			style="color: #6c6">)</span><span style="color: #6c6">{</span>
    <span style="color: #036; font-weight: bold">var</span> url = $<span style="color: #6c6">(</span><span style="color: #006; font-weight: bold">this</span><span style="color: #6c6">)</span>.<span style="color: #060">attr</span><span style="color: #6c6">(</span><span style="color: #36c">'href'</span><span style="color: #6c6">)</span>;
    <span style="color: #006; font-weight: bold">return</span> <span style="color: #36c">'&lt;a href="'</span> + url + <span style="color: #36c">'" target="_blank"&gt;Open In New Window&lt;/a&gt;'</span>;
<span style="color: #6c6">}</span><span style="color: #6c6">}</span><span style="color: #6c6">)</span>;</pre>
</div>
<h2>Settings</h2>
<table class="settings">
<tbody>
<tr>
	<th>Property</th>
	<th>Default</th>
	<th>Description</th>
</tr>
<tr id="setting-transition">
	<td>transition</td>
	<td>"elastic"</td>
	<td>The transition type. Can be set to "elastic", "fade", or "none".</td>
</tr>
<tr id="setting-speed">
	<td>speed</td>
	<td>350</td>
	<td>Sets the speed of the fade and elastic transitions, in milliseconds.</td>
</tr>
<tr id="setting-href">
	<td>href</td>
	<td>false</td>
	<td>This can be used as an alternative anchor URL or to associate a URL for non-anchor elements such as images or form buttons.
		<div class="code" style="background:#F3FBFF; padding:6px 10px; overflow:auto; display:block; border-left:4px solid #deecf3; font-size:13px;">
			<pre class="javascript">$<span style="color: #6c6">(</span><span style="color: #36c">"h1"</span><span style="color: #6c6">)</span>.<span style="color: #060">colorbox</span><span style="color: #6c6">(</span><span style="color: #6c6">{</span>href:<span style="color: #36c">"welcome.html"</span><span style="color: #6c6">}</span><span style="color: #6c6">)</span>;</pre>
		</div>
	</td>
</tr>
<tr id="setting-title">
	<td>title</td>
	<td>false</td>
	<td>This can be used as an anchor title alternative for ColorBox.</td>
</tr>
<tr id="setting-rel">
	<td>rel</td>
	<td>false</td>
	<td>This can be used as an anchor rel alternative for ColorBox. This
		allows the user to group any combination of elements together for a
		gallery, or to override an existing rel so elements are not grouped
		together.
		<div class="code" style="background:#F3FBFF; padding:6px 10px; overflow:auto; display:block; border-left:4px solid #deecf3; font-size:13px;">
			<pre class="javascript">$<span style="color: #6c6">(</span><span style="color: #36c">"a.gallery"</span><span style="color: #6c6">)</span>.<span style="color: #060">colorbox</span><span style="color: #6c6">(</span><span style="color: #6c6">{</span>rel:<span style="color: #36c">"group1"</span><span style="color: #6c6">}</span><span style="color: #6c6">)</span>;</pre>
		</div>
		Note: The value can also be set to 'nofollow' to disable grouping.
	</td>
</tr>
<tr id="setting-scalephotos">
	<td>scalePhotos</td>
	<td>true</td>
	<td>If true, and if maxWidth, maxHeight, innerWidth, innerHeight,
		width, or height have been defined, ColorBox will scale photos to fit
		within the those values.
	</td>
</tr>
<tr id="setting-scrolling">
	<td>scrolling</td>
	<td>true</td>
	<td>If false, ColorBox will hide scrollbars for overflowing content.
		This could be used on conjunction with the resize method (see below) for
		a smoother transition if you are appending content to an already open
		instance of ColorBox.
	</td>
</tr>
<tr id="setting-opacity">
	<td>opacity</td>
	<td>0.85</td>
	<td>The overlay opacity level. Range: 0 to 1.</td>
</tr>
<tr id="setting-open">
	<td>open</td>
	<td>false</td>
	<td>If true, ColorBox will immediately open.</td>
</tr>
<tr id="setting-returnfocus">
	<td>returnFocus</td>
	<td>true</td>
	<td>If true, focus will be returned when ColorBox exits to the element it was launched from.</td>
</tr>
<tr id="setting-fastiframe">
	<td>fastIframe</td>
	<td>true</td>
	<td>If false, the loading graphic removal and onComplete event will be delayed until iframe's content has completely loaded.</td>
</tr>
<tr id="setting-preloading">
	<td>preloading</td>
	<td>true</td>
	<td>Allows for preloading of 'Next' and 'Previous' content in a group,
		after the current content has finished loading. Set to false to
		disable.
	</td>
</tr>
<tr id="setting-overlayclose">
	<td>overlayClose</td>
	<td>true</td>
	<td>If false, disables closing ColorBox by clicking on the background overlay.</td>
</tr>
<tr id="setting-esckey">
	<td>escKey</td>
	<td>true</td>
	<td>If false, will disable closing colorbox on 'esc' key press.</td>
</tr>
<tr id="setting-arrowkey">
	<td>arrowKey</td>
	<td>true</td>
	<td>If false, will disable the left and right arrow keys from navigating between the items in a group.</td>
</tr>
<tr id="setting-loop">
	<td>loop</td>
	<td>true</td>
	<td>If false, will disable the ability to loop back to the beginning of the group when on the last element.</td>
</tr>
<tr id="setting-current">
	<td>current</td>
	<td>"image {current} of {total}"</td>
	<td>Text or HTML for the group counter while viewing a group.
		{current} and {total} are detected and replaced with actual numbers
		while ColorBox runs.
	</td>
</tr>
<tr id="setting-previous">
	<td>previous</td>
	<td>"previous"</td>
	<td>Text or HTML for the previous button while viewing a group.</td>
</tr>
<tr id="setting-next">
	<td>next</td>
	<td>"next"</td>
	<td>Text or HTML for the next button while viewing a group.</td>
</tr>
<tr id="setting-close">
	<td>close</td>
	<td>"close"</td>
	<td>Text or HTML for the close button. The 'esc' key will also close ColorBox.</td>
</tr>
<tr id="setting-data">
	<td>data</td>
	<td>false</td>
	<td>For submitting GET or POST values through an ajax request. The data property will act exactly like jQuery's <a href="http://api.jquery.com/load/">.load()</a> data argument, as ColorBox uses .load() for ajax handling.</td>
</tr>
<tr>
	<th>Content Type</th>
	<th></th>
	<th></th>
</tr>
<tr id="setting-iframe">
	<td>iframe</td>
	<td>false</td>
	<td>If true, specifies that content should be displayed in an iFrame.</td>
</tr>
<tr id="setting-inline">
	<td>inline</td>
	<td>false</td>
	<td><p>If true, content from the current document can be displayed by passing the href property a jQuery selector, or jQuery object.</p>

		<div class="code" style="background:#F3FBFF; padding:6px 10px; overflow:auto; display:block; border-left:4px solid #deecf3; font-size:13px;"><pre class="javascript"><span style="color: #090; font-style: italic">// Using a selector:</span>
$<span style="color: #6c6">(</span><span style="color: #36c">"#inline"</span><span style="color: #6c6">)</span>.<span style="color: #060">colorbox</span><span style="color: #6c6">(</span><span style="color: #6c6">{</span>inline:<span style="color: #036; font-weight: bold">true</span>, href:<span style="color: #36c">"#myForm"</span><span style="color: #6c6">}</span><span
					style="color: #6c6">)</span>;
&nbsp;
<span style="color: #090; font-style: italic">// Using a jQuery object:</span>
<span style="color: #036; font-weight: bold">var</span> $form = $<span style="color: #6c6">(</span><span style="color: #36c">"#myForm"</span><span style="color: #6c6">)</span>;
$<span style="color: #6c6">(</span><span style="color: #36c">"#inline"</span><span style="color: #6c6">)</span>.<span style="color: #060">colorbox</span><span style="color: #6c6">(</span><span style="color: #6c6">{</span>inline:<span style="color: #036; font-weight: bold">true</span>, href:$form<span style="color: #6c6">}</span><span style="color: #6c6">)</span>;</pre>
		</div>
	</td>
</tr>
<tr id="setting-html">
	<td>html</td>
	<td>false</td>
	<td><p>For displaying a string of HTML or text.</p>

		<div class="code" style="background:#F3FBFF; padding:6px 10px; overflow:auto; display:block; border-left:4px solid #deecf3; font-size:13px;">
			<pre class="javascript">$.<span style="color: #060">colorbox</span><span style="color: #6c6">(</span><span style="color: #6c6">{</span>html:<span style="color: #36c">"&lt;p&gt;Hello&lt;/p&gt;"</span><span style="color: #6c6">}</span><span style="color: #6c6">)</span>;</pre>
		</div>
	</td>
</tr>
<tr id="setting-photo">
	<td>photo</td>
	<td>false</td>
	<td>If true, this setting forces ColorBox to display a link as a
		photo. Use this when automatic photo detection fails (such as using a
		url like 'photo.php' instead of 'photo.jpg')
	</td>
</tr>
<tr id="setting-ajax">
	<td>ajax</td>
	<td></td>
	<td>This property isn't actually used as ColorBox assumes all hrefs
		should be treated as either ajax or photos, unless one of the other
		content types were specified.
	</td>
</tr>
<tr id="setting-dimensions">
	<th>Dimensions</th>
	<th></th>
	<th></th>
</tr>
<tr id="setting-width">
	<td>width</td>
	<td>false</td>
	<td>Set a fixed total width. This includes borders and buttons. Example: "100%", "500px", or 500</td>
</tr>
<tr id="setting-height">
	<td>height</td>
	<td>false</td>
	<td>Set a fixed total height. This includes borders and buttons. Example: "100%", "500px", or 500</td>
</tr>
<tr id="setting-innerwidth">
	<td>innerWidth</td>
	<td>false</td>
	<td>This is an alternative to 'width' used to set a fixed inner width.
		This excludes borders and buttons. Example: "50%", "500px", or 500
	</td>
</tr>
<tr id="setting-innerheight">
	<td>innerHeight</td>
	<td>false</td>
	<td>This is an alternative to 'height' used to set a fixed inner
		height. This excludes borders and buttons. Example: "50%", "500px", or
		500
	</td>
</tr>
<tr id="setting-initialwidth">
	<td>initialWidth</td>
	<td>300</td>
	<td>Set the initial width, prior to any content being loaded.</td>
</tr>
<tr id="setting-initialheight">
	<td>initialHeight</td>
	<td>100</td>
	<td>Set the initial height, prior to any content being loaded.</td>
</tr>
<tr id="setting-maxwidth">
	<td>maxWidth</td>
	<td>false</td>
	<td>Set a maximum width for loaded content. Example: "100%", 500, "500px"</td>
</tr>
<tr id="setting-maxheight">
	<td>maxHeight</td>
	<td>false</td>
	<td>Set a maximum height for loaded content. Example: "100%", 500, "500px"</td>
</tr>
<tr>
	<th>Slideshow</th>
	<th></th>
	<th></th>
</tr>
<tr id="setting-slideshow">
	<td>slideshow</td>
	<td>false</td>
	<td>If true, adds an automatic slideshow to a content group / gallery.</td>
</tr>
<tr id="setting-slideshowspeed">
	<td>slideshowSpeed</td>
	<td>2500</td>
	<td>Sets the speed of the slideshow, in milliseconds.</td>
</tr>
<tr id="setting-slideshowauto">
	<td>slideshowAuto</td>
	<td>true</td>
	<td>If true, the slideshow will automatically start to play.</td>
</tr>
<tr id="setting-slideshowstart">
	<td>slideshowStart</td>
	<td>"start slideshow"</td>
	<td>Text for the slideshow start button.</td>
</tr>
<tr id="setting-slideshowstop">
	<td>slideshowStop</td>
	<td>"stop slideshow"</td>
	<td>Text for the slideshow stop button</td>
</tr>
<tr>
	<th>Positioning</th>
	<th></th>
	<th></th>
</tr>
<tr id="setting-fixed">
	<td>fixed</td>
	<td>false</td>
	<td>If true, ColorBox will be displayed in a fixed position within the
		visitor's viewport. This is unlike the default absolute positioning
		relative to the document.
	</td>
</tr>
<tr id="setting-top">
	<td>top</td>
	<td>false</td>
	<td>Accepts a pixel or percent value (50, "50px", "10%"). Controls
		ColorBox's vertical positioning instead of using the default position of
		being centered in the viewport.
	</td>
</tr>
<tr id="setting-bottom">
	<td>bottom</td>
	<td>false</td>
	<td>Accepts a pixel or percent value (50, "50px", "10%"). Controls
		ColorBox's vertical positioning instead of using the default position of
		being centered in the viewport.
	</td>
</tr>
<tr id="setting-left">
	<td>left</td>
	<td>false</td>
	<td>Accepts a pixel or percent value (50, "50px", "10%"). Controls
		ColorBox's horizontal positioning instead of using the default position
		of being centered in the viewport.
	</td>
</tr>
<tr id="setting-right">
	<td>right</td>
	<td>false</td>
	<td>Accepts a pixel or percent value (50, "50px", "10%"). Controls
		ColorBox's horizontal positioning instead of using the default position
		of being centered in the viewport.
	</td>
</tr>
<tr>
	<th>Callbacks</th>
	<th></th>
	<th></th>
</tr>
<tr id="setting-onopen">
	<td>onOpen</td>
	<td>false</td>
	<td>Callback that fires right before ColorBox begins to open.</td>
</tr>
<tr id="setting-onload">
	<td>onLoad</td>
	<td>false</td>
	<td>Callback that fires right before attempting to load the target content.</td>
</tr>
<tr id="setting-oncomplete">
	<td>onComplete</td>
	<td>false</td>
	<td>Callback that fires right after loaded content is displayed.</td>
</tr>
<tr id="setting-oncleanup">
	<td>onCleanup</td>
	<td>false</td>
	<td>Callback that fires at the start of the close process.</td>
</tr>
<tr id="setting-onclosed">
	<td>onClosed</td>
	<td>false</td>
	<td>Callback that fires once ColorBox is closed.</td>
</tr>
</tbody>
</table>

<h2>Public Methods</h2>
<table>
	<tbody>
	<tr>
		<td>$.colorbox()</td>
		<td>This method allows you to call ColorBox without having to assign it to an element.
			<div class="code" style="background:#F3FBFF; padding:6px 10px; overflow:auto; display:block; border-left:4px solid #deecf3; font-size:13px;">
				<pre class="javascript">$.<span style="color: #060">colorbox</span><span style="color: #6c6">(</span><span style="color: #6c6">{</span>href:<span style="color: #36c">"login.php"</span><span style="color: #6c6">}</span><span style="color: #6c6">)</span>;</pre>
			</div>
		</td>
	</tr>
	<tr>
		<td>$.colorbox.next()<br> $.colorbox.prev()</td>
		<td>These methods moves to the next and previous items in a group and are the same as pressing the 'next' or 'previous' buttons.</td>
	</tr>
	<tr>
		<td>$.colorbox.close()</td>
		<td>This method initiates the close sequence, which does not
			immediately complete. The lightbox will be completely closed only when
			the 'cbox_closed' event / onClosed callback is fired.
		</td>
	</tr>
	<tr>
		<td>$.colorbox.element()</td>
		<td>This method is used to fetch the current HTML element that
			ColorBox is associated with. Returns a jQuery object containing the
			element.
			<div class="code" style="background:#F3FBFF; padding:6px 10px; overflow:auto; display:block; border-left:4px solid #deecf3; font-size:13px;">
				<pre class="javascript"><span style="color: #036; font-weight: bold">var</span> $element = $.<span style="color: #060">colorbox</span>.<span style="color: #060">element</span><span style="color: #6c6">(</span><span style="color: #6c6">)</span>;</pre>
			</div>
		</td>
	</tr>
	<tr>
		<td>$.colorbox.resize()</td>
		<td>This allows ColorBox to be resized based on it's own auto-calculations, or to a specific size.
			This must be called manually after ColorBox's content has loaded.
			The optional parameters object can accept 'width' or 'innerWidth' and 'height' or 'innerHeight'.
			Without specifying a width or height, ColorBox will attempt to recalculate the height of it's current content.
		</td>
	</tr>
	<tr>
		<td>$.colorbox.remove()</td>
		<td>Removes all traces of ColorBox from the document. Not the same as $.colorbox.close(), which tucks colorbox away for future use.</td>
	</tr>
	</tbody>
</table>

<h2>Event Hooks</h2>

<p>These event hooks fire at the same time as their corresponding
	callbacks (ie. cbox_complete &amp; onComplete), but can be used to make a
	universal change to ColorBox, while callbacks are only applied to
	selected elements.</p>

<div class="code" style="background:#F3FBFF; padding:6px 10px; overflow:auto; display:block; border-left:4px solid #deecf3; font-size:13px;"><pre class="javascript"><span style="color: #090; font-style: italic">// Example of using an event listener and public method to build a primitive slideshow:</span>
$<span style="color: #6c6">(</span>document<span style="color: #6c6">)</span>.<span style="color: #060">bind</span><span style="color: #6c6">(</span><span style="color: #36c">'cbox_complete'</span>, <span style="color: #036; font-weight: bold">function</span><span style="color: #6c6">(</span><span style="color: #6c6">)</span><span style="color: #6c6">{</span>
    setTimeout<span style="color: #6c6">(</span>$.<span style="color: #060">colorbox</span>.<span style="color: #060">next</span>, <span style="color: #c00">1500</span><span style="color: #6c6">)</span>;
<span style="color: #6c6">}</span><span style="color: #6c6">)</span>;</pre>
</div>

<table>
	<tbody>
	<tr>
		<td>cbox_open</td>
		<td>triggers when ColorBox is first opened, but after a few key variable assignments take place.</td>
	</tr>
	<tr>
		<td>cbox_load</td>
		<td>triggers at the start of the phase where content type is determined and loaded.</td>
	</tr>
	<tr>
		<td>cbox_complete</td>
		<td>triggers when the transition has completed and the newly loaded content has been revealed.</td>
	</tr>
	<tr>
		<td>cbox_cleanup</td>
		<td>triggers as the close method begins.</td>
	</tr>
	<tr>
		<td>cbox_closed</td>
		<td>triggers as the close method ends.</td>
	</tr>
	</tbody>
</table>

</article>
</body>
</html>
<!-- Served Gzipped From Cache! -->